﻿<div>

<script type="text/javascript">
    $(function () {
        var t = $("#t").tabs({
            width: 600,
            height: 200,
            lineHeight: 0,
            enableConextMenu: true,
            enableNewTabMenu: true,
            onAdd: function () {
                var array = $.map(t.tabs("tabs"), function (p) { var opts = p.panel("options"); return { value: opts.title, text: opts.title }; });
                cc.combobox("loadData", array);
            }
        });

        var data = $.map(t.tabs("tabs"), function (p) { var opts = p.panel("options"); return { value: opts.title, text: opts.title }; }),
            cc = $("#select1").combobox({ width: 120, data: data });

        $("#Button1").click(function () {
            var title = $("#Text1").val(), href = $("#Text2").val(), iniframe = $("#Checkbox1")[0].checked, target = cc.combobox("getValue");
            if (!title || !href) { return $.messager.show("请输入要新添加的选项卡的标题和路径"); }
            if (!target) {
                $.messager.show("请选择新选项卡被添加的目标位置");
                return cc.combobox("showPanel");
            }
            t.tabs("insert", {
                title: title, href: href, iniframe: iniframe, closable: true, target: target
            });
        });

        $("#Button2").click(function () {
            t.tabs("move", { source: 2, target: 1, point: "before" });
        });

        $("#Button3").click(function () {
            t.tabs("move", { source: 0, target: 2, point: "after" });
        });
    });
</script>

<h2>jEasyUI Tabs Extensions - 移动和往指定位置插入 Tab</h2>
<p>该部分扩展由文件 jeasyui.extensions.tabs.js 实现。</p>
<hr />
<p>
    该 DEMO 演示往指定位置插入新的选项卡，同时可以对之前的选项卡也可以进行移动
</p>
<p>
    <input id="Button1" type="button" value="添加新选项卡" />
    选项卡标题：<input id="Text1" type="text" />
    选项卡路径：<input id="Text2" type="text" />
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">是否通过 IFRAME 加载：</label>
    <br />
    新选项卡将会被添加在选项卡
    <select id="select1"></select>的前面
    <br /><br />
    <input id="Button2" type="button" value="将第三个选项卡放在第二个选项卡前面" />
    <input id="Button3" type="button" value="将第一个选项卡放在第三个选项卡后面" />
</p>
<div id="t">
    <div data-options="title: 'tab1', href: 'tabs/refreshable/code.html', refreshable: true">tab1</div>
    <div data-options="title: 'tab2', refreshable: false">tab2</div>
    <div data-options="title: '项目根目录', refreshable: true, iniframe: true, href: '/'"></div>
</div>

</div>